<template>
  <div class="pro-detail">
    <div class="wrap clearfix">
      <detail :current="current">
        <div slot="detail">
          <div class="main-top">
            <div class="main-top-wrap clearfix">
              <div class="fl pic-show">
                <div class="big-list">
                  <ul class="big-list-wrap">
                    <li class="active">
                      <img src="/static/images/dot.jpg" alt="..." />
                    </li>

                    <li>
                      <img src="/static/images/dot.jpg" alt="..." />
                    </li>

                    <li>
                      <img src="/static/images/dot.jpg" alt="..." />
                    </li>

                    <li>
                      <img src="/static/images/dot.jpg" alt="..." />
                    </li>

                    <li>
                      <img src="/static/images/dot.jpg" alt="..." />
                    </li>
                  </ul>
                </div>

                <div class="small-list">
                  <ul class="clearfix small-list-wrap">
                    <li class="active">
                      <img src="/static/images/dot.jpg" alt="... " />
                    </li>

                    <li>
                      <img src="/static/images/dot.jpg" alt="... " />
                    </li>

                    <li>
                      <img src="/static/images/dot.jpg" alt="... " />
                    </li>

                    <li>
                      <img src="/static/images/dot.jpg" alt="... " />
                    </li>

                    <li>
                      <img src="/static/images/dot.jpg" alt="... " />
                    </li>
                  </ul>

                  <button class="prev fa fa-angle-left"></button>
                  <button class="next fa fa-angle-right"></button>
                </div>

                <div class="right-line"></div>
              </div>

              <div class="parame-show">

                <div class="head">
                  <div class="title">
                    <h3>某某药剂title</h3>
                  </div>

                  <div class="subtitle">
                    <h4><span>某某药剂subtitle</span> <span>某某药剂subtitle</span> <span>某某药剂subtitle</span></h4>
                  </div>
                </div>

                <div class="body">
                  <div class="parame">
                    <ul class="parame-wrap">
                      <li class="parame-item">
                        <span class="parame-title">商品编码：</span>
                        <span class="parame-text">ARHM035-4-10</span>
                      </li>

                      <li class="parame-item origin-price">
                        <span class="parame-title">商品编码：</span>
                        <span class="parame-text">$<em class="price">499.00</em></span>
                      </li>

                      <li class="parame-item current-price">
                        <span class="parame-title">商品编码：</span>
                        <span class="parame-text">$<em class="price">399.00</em></span>
                      </li>

                      <li class="parame-item discount-price">
                        <span class="parame-title">商品编码：</span>
                        <span class="parame-text">省$<em class="price">100.00</em></span>
                      </li>
                    </ul>
                  </div>

                  <div class="select-num">
                    <span>我 要 买</span>
                    <div class="input-box">
                      <button class="reduce gradient">-</button>
                      <input type="text" class="display-num" value="1" readonly maxlength="2" />
                      <button class="add gradient">+</button>
                    </div>
                  </div>
                </div>

                <div class="foot">
                  <div class="btn-wrap">
                    <a href="#" class="btn btn-big go-buy">
                      <i class="fa fa-shopping-cart"></i>
                      <span>立即购买</span>
                    </a>

                    <a href="#" class="btn btn-big join-cart">
                      <i class="fa fa-shopping-cart"></i>
                      <span>加入购物车</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="main-con">
            <div class="menu">
              <ul class="clearfix">
                <li class="active">
                  <router-link to="/prodetail/prodes" class="link-wrap">
                    商品描述
                  </router-link>
                </li>

                <li>
                  <router-link to="/prodetail/procomm" class="link-wrap">
                    商品评论(<em class="count">22</em>)
                  </router-link>
                </li>

                <li>
                  <router-link to="/prodetail/proother" class="link-wrap">
                    购买须知
                  </router-link>
                </li>
              </ul>
            </div>

            <router-view></router-view>
          </div>
        </div>
      </detail>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Detail from 'base/detail/detail'
  import axios from 'axios'

  export default {
    data() {
      return {
        current: {"1": 12, "2": "123"}
      }
    },
    created() {

    },
    components: {
      Detail
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .main-top
    .main-top-wrap
      padding: 20px 0
      .pic-show
        position: relative
        width: 40%
        padding: 0 2%
        div.big-list
          ul.big-list-wrap
            li
              display: none
              font-size: 0
              img
                display: block
                width: 400px
                margin: 0 auto
              &.active
                display: block
        div.small-list
          position: relative
          ul.small-list-wrap
            display: block
            wh(342px, 50px)
            margin: 20px auto 0
            font-size: 0
            li
              display: inline-block
              margin: 0 9px
              border: 1px solid #aaa
              img
                wh(48px, 48px)
                cursor: pointer
              &.active
                border-color: $vice-color
          button
            position: absolute
            top: 0
            wh(40px, 50px)
            line-height: 50px
            background-color: transparent
            text-align: center
            sc($font-large, $back)
            cursor: pointer
            br(5px)
            &.prve
              left: 0
            &.next
              right: 0
            &:hover
              background-color: $back
              color: $vice-color
        .right-line
          rtposition(0, 0)
          wh(1px, 420px)
          background-color: #aaa
      .parame-show
        margin-left: 44%
        width: 42%
        padding: 0 2%
        .head
          padding: 10px 20px
          .title
            h3
              hh(16px)
              font-weight: normal
              sc($font-medium, $back)
          .subtitle
            h4
              hh(12px)
              margin: 10px 0
              font-weight: normal
              color: $vice-color
              span
                padding-right: 10px
        .body
          div.parame
            padding: 10px 15px 15px
            background-color: #f6f6f6
            color: #666
            ul.parame-wrap
              li.parame-item
                margin-top: 8px
                span.parame-title
                  display: inline-block
                  vertical-align: middle
                  wh(100px, 20px)
                  line-height: 20px
                  no-wrap()
                span.parame-text
                  display: inline-block
                  vertical-align: middle
                .price
                  margin-left: 3px
                &.origin-price
                  span.parame-text
                    text-decoration: line-through
                &.current-price
                  span.parame-text
                    vertical-align: middle
                    sc($font-large-x, $vice-color)
                    font-weight: bold
          .select-num
            padding: 20px 15px 0
            span
              vertical-align: middle
            .input-box
              vertical-align: middle
              display: inline-block
              hh(40px)
              margin-left: 20px
              font-size: 0
              button
                float: left
                wh(40px, 40px)
                border: 1px solid #ccc
                cursor: pointer
                br(2px)
                font-size: $font-small
              .display-num
                float: left
                wh(38px, 38px)
                padding:0 10px
                margin: 0 10px
                border: 1px solid #ccc
                font-size: $font-small
                text-align: center
        .foot
          .btn-wrap
            padding: 20px 0
            font-size: 0
            .btn
              color: $white
              &.go-buy
                background-color: $vice-color
              &.join-cart
                background-color: $back
              &:first-child
                margin-right: 8px
  .main-con
    .menu
      text-align: center
      background-color: $back
      ul
        wh(100%, 40px)
        line-height: 40px
        font-size: 0
        li
          display: inline-block
          width: 320px
          hh(40px)
          font-size: 0
          a
            width: 90%
            padding: 0 5%
            sc($font-medium, $white)
          &.active
            position: relative
            top: -5px
            vertical-align: top
            hh(45px)
            width: 318px
            border-right: 1px solid $white
            border-left: 1px solid $white
            background-color: $vice-color
            &:after
              content: ''
              ltposition(50%, 45px)
              z-index: 99999999999999
              triangle-down($font-medium-x, $vice-color)
              margin-left: -9px
          &:first-child
            &.active
              border-left-color: $vice-color
          &:last-child
            &.active
              border-right-color: $vice-color
</style>